<template>
  <!--导航条-->
  <div style="margin-bottom: 300px">
    <!--图片-->
    <div class="banner">
      <img src="../Home/images/product.jpg" alt="">
      <div class="wenzi">
        <h3>我们制造的不是产品而是关爱！</h3>
      </div>
    </div>
    <!-- 内容 -->
    <div class="footer">
      <!--    医院内容-->
      <div class="footer-top">
        <div class="footer-top-left">医院</div>
        <div class="searchHospital">
          <el-row class="demo-autocomplete" style="margin: auto;">
            <el-col :span="12">
              <el-autocomplete
                class="inline-input"
                style="min-width: 400px"
                v-model="hospital"
                :fetch-suggestions="querySearch"
                placeholder="请输入医院名称"
                prefix-icon="el-icon-search"
                :trigger-on-focus="false"
                @select="handleSelect"
                @keyup.enter.native="getWheelchair"
                clearable
              ></el-autocomplete>
            </el-col>
          </el-row>
          <span :title="hospitalName" v-model="hospitalName">
            <img src="./images/iconHospital.png">
            {{hospitalName}}
          </span>
        </div>
      </div>
      <!--  产品内容  -->
      <div class="footer-banner">
        <div class="footer-banner-an" v-for="(wheelchair,index) in allWheelchairInfo" :key="index">
          <a href="javascript:void(0)" @click="clickWheelchair(index)">{{wheelchair.fuction}}</a>
        </div>
      </div>
      <!--    轮播图-->
      <div class="swiper-container">

        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./images/1578357370250946.jpg"></div>
          <div class="swiper-slide"><img src="./images/1578357652454342.jpg"></div>
          <div class="swiper-slide"><img src="./images/1578357695431668.jpg"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
      </div>
      <!--    详细介绍-->
      <div class="footer-footer">
        {{ orderInfo.description }}
      </div>
      <!--    购买按钮-->
      <div class="footer-footer1">
        <div>
          <span>轮椅剩余数量：{{orderInfo.number}}</span>
          <span>轮椅租用价格：{{orderInfo.price}}/半小时</span>
          <span style="color: #666666">注意：一旦点击租用便不能退款，请确认轮椅状况是否是自身所需；租用时长未满半小时按半小时算！</span>
        </div>
        <button :disabled="orderInfo.number < 1" @click="submitOrder">点击租聘</button>
      </div>
    </div>
  </div>

</template>

<script>
import Swiper from "swiper";
export default {
  name: "Product",
  data(){
    return{
      orderInfo:{
        wheelchairId:'',
        wheelchairFuction:'',
        description:'',
        number:'',
        price:''
      },
      // wheelchairIndex:1,
      restaurants: [],
      hospital:'',
      hospitalInfo:{id:'1575401739488600066',hospitalName:'贵州省医院'},
      hospitalName:'贵州省医院',
      tableData:[],
      allWheelchairInfo:[]
    }
  },
  created() {
    this.initSwiper();
    this.restaurants = this.loadAll()
    this.getAllHospital()
    this.getWheelchairInfo().then(()=>{
      this.clickWheelchair(0)
    })
  },
  methods: {
    //获取全部医院信息
    async getAllHospital(){
      await this.$store.dispatch('getHospital')
      this.tableData.splice(0,this.tableData.length)
      this.$store.state.backstage.hospital.forEach((item)=>{
        const {id,name,location} = item
        let hospitalArr = {id:id,value:name,location:location}
        this.tableData.push(hospitalArr)
      })
    },
    initSwiper() {
      new Swiper(".swiper-container", {
        //设置轮播的循环方式
        loop: true,
        //设置自动播放间隔时间
        autoplay: 2000,
        // 轮播效果,默认为平滑轮播
        effect: "slide",
        //分页器
        pagination: ".swiper-pagination",
        //前进后退按钮
        prevButton: ".swiper-button-prev",
        nextButton: ".swiper-button-next",
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar',
        },
        // 用户中断轮播后续播
        autoplayDisableOnInteraction: false,
      });
    },
    //搜寻医院获取轮椅信息
    async getWheelchair(){
      await this.$store.dispatch('getNameHospital',{name:this.hospital})
      let hospitalInfoName = this.$store.state.home.hospitalNameInfo
      if (hospitalInfoName.data.length !== 0 || undefined){
        this.hospitalInfo.hospitalName = hospitalInfoName.data[0].name
        this.hospitalInfo.id = hospitalInfoName.data[0].id
        this.hospitalName = hospitalInfoName.data[0].name
        await this.getWheelchairInfo()
      }else {
        this.$message.error('输入医院名称有误');
      }
    },
    //通过医院名字获取轮椅信息
    getWheelchairInfo(){
      return new Promise((async (resolve, reject) => {
        await this.$store.dispatch('getNameWheelchair', {hospitalName: this.hospitalInfo.hospitalName})
        this.allWheelchairInfo.splice(0, this.allWheelchairInfo.length, ...this.$store.state.home.wheelchairInfo)
        if (this.allWheelchairInfo.length){
          resolve(true)
        }else{
          reject(false)
        }
      }))

    },
    //订单点击
    submitOrder(){
      if (localStorage.getItem("USERTOKEN") === null){
        this.$router.replace('/')
      }else {
        this.$confirm('订单已完成, 是否跳转到订单页面?', '订单消息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let hospitalId = this.hospitalInfo.id
          let hospitalName = this.hospitalInfo.hospitalName
          let {wheelchairId, wheelchairFuction, price} = this.orderInfo
          await this.$store.dispatch('addUserOrder', {hospitalId, hospitalName, wheelchairId, wheelchairFuction, price})
          if (this.$store.state.home.addOrderCode.code === 1) {
            this.$router.push('/home/order')
            this.$message({
              type: 'success',
              message: this.$store.state.home.addOrderCode.data
            });
          } else {
            this.$message.error('下单失败')
            return null
          }
        }).catch(async () => {
          let hospitalId = this.hospitalInfo.id
          let hospitalName = this.hospitalInfo.hospitalName
          let {wheelchairId, wheelchairFuction, price} = this.orderInfo
          await this.$store.dispatch('addUserOrder', {hospitalId, hospitalName, wheelchairId, wheelchairFuction, price})
          if (this.$store.state.home.addOrderCode.code === 1) {
            this.$message({
              type: 'success',
              message: this.$store.state.home.addOrderCode.data
            });
          } else {
            this.$message.error('下单失败')
            return null
          }
        });
      }
    },
    clickWheelchair(index){
      let {id,fuction,description,number,price} = this.allWheelchairInfo[index];
      this.orderInfo.wheelchairId = id
      this.orderInfo.wheelchairFuction = fuction
      this.orderInfo.description = description
      this.orderInfo.number = number
      this.orderInfo.price = price
    },
    querySearch(queryString, cb) {
      let restaurants = this.restaurants;
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    //搜索框展示的全部医院
    loadAll() {
      return this.tableData;
    },
    //搜索框点击获取医院信息
    async handleSelect(item) {
      this.hospitalInfo.hospitalName = item.value
      this.hospitalInfo.id = item.id
      await this.getWheelchairInfo()
    }
  }
}
</script>

<style scoped>
@import "../../../node_modules/swiper/css/swiper.css";
.swiper-slide img {
  margin-left: 200px;
  width: 65%;
  object-fit: cover;
}
.swiper-container {
  width: 1100px;
  height: 477px;
  margin-left: 150px;
  margin-top: 10px;
}
/*<!-- 导航条 -->*/
*{
  margin: 0;
  padding: 0;
  /*background-color: #f8f9fa;*/
}

li{
  display: inline-block;
  text-align: center;
  line-height: 80px;
  font-size: 18px;
  list-style:none;
  width: 200px;
}
/* 鼠标滑动变效果*/
li:hover{
  border-top:1px solid #ffc107;
}
li:hover a{
  color: #ffc107;
}
li a{
  display: inline-block;
  color: #383838;
  text-decoration:none;
}

.banner{
  overflow: hidden;
}
.banner img {
  max-width: 100%;
}
.wenzi{
  position: absolute;
  font-size: 50px;
  font-weight: bolder;
  color: #fff;
  margin-top: -25vh;
  left: 50%;
  transform: translateX(-50%);
}

/*    内容区域*/
.footer{
  /*position: absolute;*/
  margin-left: 60px;
  margin-top: 60px;
  height: 700px;
  width: 1400px;
  background: #fff;
}

.footer-top{
  display: flex;
  align-items: center;
  width: 1400px;
  border-bottom: 1px solid #B8B8B8  ;
}
.footer-top-left{
  width: 80px;
  text-align: center;
  margin-left: 60px;
  font-size: 40px;
  font-weight: bolder;
  color: #24394e;
  line-height: 120px;
}

.searchHospital{
  display: flex;
  align-items: center;
  margin: auto;
  width: 1200px;
}

.searchHospital span{
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 18px;
  text-align: right;
  width: 300px;
  overflow:hidden;
  text-overflow: ellipsis;
}
.searchHospital img{
  width: 2vw;
  margin-right: 1vw;
}

.footer-top-rhg ul li{
  text-align: center;
  list-style:none;
}
.footer-top-rhg li a{
  margin-top: 20px;
  text-align: center;

}
.footer-top-rhg li:hover{
  border-bottom: 5px solid #ffc107;
  border-top: 0;
}


/*    产品内容*/
.footer-banner{
  display: flex;
  justify-content: center;
  height: 150px;

}
.footer-banner-an{
  margin-top: 45px;
  width: 160px;
  height: 60px;
}
.footer-banner-an a{
  display: block;
  background-color: #fff;
  text-decoration: none;
  color: black;
  line-height: 2.5;
  padding: 5px 40px;
  text-align: center;
  font-size: 16px;
  margin: 5px;
  border-radius: 30px;
}
.footer-banner-an a:hover{
  background-color: #fa9507;
}

/*    详细介绍*/
.footer-footer{
  margin-top: 10px;
  margin-left: 200px;
  font-size: 20px;
  text-align: center;
  width: 1000px;
  border: 1px solid black;
}

/*    购买按钮*/
.footer-footer1{
  display: flex;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
}
.footer-footer1 button{
  margin: auto 20px;
  width: 180px;
  height: 50px;
  border-radius: 30px;
  background-color: #fa9507;
  border: 1px solid #fa9507;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}
.footer-footer1 div{
  display: flex;
  flex-flow: column;
  max-width: 50vw;
  border: 1px solid #a5acb9;
  border-radius: 20px;
  padding: 2vh 2vw;
}
.footer-footer1 span{
  display: block;
  font-size: 15px;
  margin-top: 1vh;
}
</style>
